<script setup lang="ts">
  const {userList} = defineProps(['userList'])
  const targetName = defineModel('targetName')

  const choose = (name:any)=>{
    targetName.value = name
  }
  
</script>

<template>
  <div>
    <div class="socket">
        <ul  class="user_list" >
          <li
            v-for=" (item) in userList"
            class="user_item"
            :class="{active:targetName === item.userName}"
            @click="choose(item.userName)"
          >
          <Image
            class="img"
            width="40"
            height="40"
            radius="5"
            cover
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />
          <span>{{ item.userName }}</span>
          <Icon class="icon" name="star" />
          </li>
        </ul>
      </div>
  </div>
</template>

<style lang="scss" scoped>
.user_list{
  max-height: 300px;
  overflow-y: hidden;
  margin-right: 8px;
  &:hover{
    overflow-y: scroll;
    margin-right: 0;
  }
  .user_item{
    height: 50px;
    display: flex;
    // justify-content: center;
    align-items: center;
    cursor: pointer;
    &:hover{
      background-color: #cfcfcfc7;
    }
    .img{
      margin: 0 10px;
    }
    .icon{
      margin-left: auto;
      margin-right: 10px;
    }
    &.active{
      background-color: #b1b0b0;
    }
  }
}
</style>
